<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title></title>
	<style type="text/css">
		ul {
			list-style: none;
			position: relative;
		}

		* {
			margin: 0;
			padding: 0;
		}

		li {
			width: 47%;
			position: absolute;
			top: 0;
		}

		a {
			display: block;
		}

		#works .worksPic {
			border-radius: 6px 6px 0 0;
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
			-webkit-box-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			height: auto;
		}

		#works img {
			max-width: 100%;
			max-height: 500px;
			position: relative;
			z-index: 2;
		}

		#works a h6 {
			padding: 10px;
		}
	</style>
</head>

<body>
	<ul id="works" class="clearfix">
		<li>
			<a href="javascript:;">
				<div class="worksPic">
					<img src="images/artcategoryitem1.png" />
				</div>
				<h6>明珠第三个第三个电风扇感豆腐干豆腐干豆腐</h6>
			</a>
		</li>
		<li>
			<a href="javascript:;">
				<div class="worksPic">
					<img src="images/artcategorybanner.png" />
				</div>
				<h6>明珠</h6>
			</a>
		</li>
		<li>
			<a href="javascript:;">
				<div class="worksPic">
					<img src="images/artistcustomizelist1.png" />
				</div>
				<h6>明珠</h6>
			</a>
		</li>
		<li>
			<a href="javascript:;">
				<div class="worksPic">
					<img src="images/artistcustomizelist2.png" />
				</div>
				<h6>明珠</h6>
			</a>
		</li>
		<li>
			<a href="javascript:;">
				<div class="worksPic">
					<img src="images/artistcustomizeslide.png" />
				</div>
				<h6>明珠</h6>
			</a>
		</li>
		<li>
			<a href="javascript:;">
				<div class="worksPic">
					<img src="images/artistcustomizeslide01.png" />
				</div>
				<h6>明珠</h6>
			</a>
		</li>
	</ul>
	<a href="javascript:;" id="more">添加更多</a>
	<script src="js/jquery.min.js"></script>
	<script type="text/javascript">
		//全局变量，瀑布流调用时的需要调整的盒子，一开始是都需要，所以-1
		var index = -1,
			//记录瀑布流左右的高度
			leftHeight = 0,
			rightHeight = 0;
		window.addEventListener('load', function () {
			flowLayout('#works>li');
		}, false);
		$(function () {
			document.getElementById("more").addEventListener('click', function () {
				$('#works').append('<li style="opacity: 0;"><a href="javascript:;"><div class="worksPic"><img src="http://bidlive-small.oss-cn-shenzhen.aliyuncs.com/data/upload/shop/auction/20171027/b3c70c76085d9d05342b846b11d24040.jpg?auto-orient=1&x-oss-process=image/resize,w_300" /></div><h6>明珠第三个第三个电风扇感豆腐干豆腐干豆腐</h6></a></li><li style="opacity: 0;"><a href="javascript:;"><div class="worksPic"><img src="http://bidlive-small.oss-cn-shenzhen.aliyuncs.com/data/upload/shop/auction/20171027/6b9b62459ff4364ea937ecd8732f6d98.jpg?auto-orient=1&x-oss-process=image/resize,w_300" /></div><h6>明珠</h6></a></li><li style="opacity: 0;"><a href="javascript:;"><div class="worksPic"><img src="http://bidlive-small.oss-cn-shenzhen.aliyuncs.com/data/upload/shop/auction/20171027/f181c05b3b0a3649fdf89587bffba6ad.jpg?auto-orient=1&x-oss-process=image/resize,w_300" /></div><h6>明珠</h6></a></li><li style="opacity: 0;"><a href="javascript:;"><div class="worksPic"><img src="http://bidlive-small.oss-cn-shenzhen.aliyuncs.com/data/upload/shop/auction/20171027/71b9d87f7b013dfa4dc059b9c3b3547c.jpg?auto-orient=1&x-oss-process=image/resize,w_300" /></div><h6>明珠</h6></a></li><li style="opacity: 0;"><a href="javascript:;"><div class="worksPic"><img src="http://bidlive-small.oss-cn-shenzhen.aliyuncs.com/data/upload/shop/auction/20171027/003c8c1a6eb0ce8ae78eff9cab7dc48a.jpg?auto-orient=1&x-oss-process=image/resize,w_300" /></div><h6>明珠</h6></a></li>');
				var imgNum;
				if (index === -1) {
					imgNum = $('#works img').length;
					$('#works img').error(function () {
						$(this).attr('src', default_img);
					});
					$('#works img').load(function () {
						if (--imgNum === 0) {
							// 加载完成
							flowLayout('#works>li');
							$('#works>li').css('opacity', 1);
						}
					});
				} else {
					var newLis = $('#works>li:gt(' + index + ')');
					imgNum = newLis.length;
					$('#works img:gt(' + index + ')').error(function () {
						$(this).attr('src', default_img);
					});
					$('#works img:gt(' + index + ')').load(function () {
						if (--imgNum === 0) {
							// 加载完成
							flowLayout('#works>li');
							newLis.css('opacity', 1);
						}
					});
				}

			});
		});
		//瀑布流
		function flowLayout(el) {
			var maxHeight = 0,
				i,
				target = document.querySelectorAll(el);
			for (i = index + 1; i < target.length; i++) {
				if (leftHeight <= rightHeight) {
					//左边的
					target[i].style.top = leftHeight + 10 + 'px';
					target[i].style.left = '2%';
					leftHeight = leftHeight + target[i].offsetHeight + 10;
				} else {
					//右边的
					target[i].style.top = rightHeight + 10 + 'px';
					target[i].style.right = '2%';
					rightHeight = rightHeight + target[i].offsetHeight + 10;
				}
				index = i;
			}
			maxHeight = leftHeight > rightHeight ? leftHeight : rightHeight;
			$(target).parent().height(maxHeight);
		}
	</script>
</body>

</html>